<!DOCTYPE HTML>
<html>

<head>
    <title>pixi.js game</title>
    <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta charset="utf-8">
    <style type="text/css">
        body {
            background-color: #333333;
            margin: 0px;
            overflow: hidden;
        }

        .shadow {
            box-shadow: 0 0 25px #000;
        }

        #container {
            width: 1003px;
            height: 580px;
            margin-top: 50px;
            margin-left: -501px;
            left: 50%;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="container" class="shadow">
    </div>
    <script src="../../lib/stats.min.js"></script>
    <script src="../../lib/pixi.min.js"></script>
    <script src="../../lib/pixi-spine.js"></script>
    <script src="../../lib/TweenLite.min.js"></script>
    <script src="//localhost:3001/build/proton.js"></script>
    <script>
        var app;
        var container;
        var proton;
        var renderer;
        var smokeEmitter;
        var coinEmitter;
        var glodFrame;
        var jumpOver = false;
        var postition = 0,
            pixie,
            background,
            background2,
            foreground,
            foreground2;

        main();

        function main() {
            initPIXI();
            loadAssets();
        }

        function initPIXI() {
            app = new PIXI.Application(1003, 580, { backgroundColor: 0x1099bb });
            container = document.getElementById('container');
            container.appendChild(app.view);

            app.stop();
        }

        function loadAssets() {
            PIXI.loader
                .add('pixie', 'assets/Pixie.json')
                .add('gold', 'image/gold_anim.json')
                .load(onAssetsLoaded);
        }

        function onAssetsLoaded(loader, res) {
            addBackground(loader, res);
            addPixie(loader, res);
            addGlodAnim(loader, res);

            addPixiEventListener();
            app.start();
            app.ticker.add(tick);

            addProton();
            addRain();
            addSmoke();
            addCoin();
        }

        function addPixiEventListener() {
            app.stage.interactive = true;
            app.stage.on('pointerdown', onTouchStart);
        }

        function onTouchStart() {
            if (jumpOver) return;

            pixie.state.setAnimation(0, 'jump', false);
            pixie.state.addAnimation(0, 'running', true, 0);

            smokeEmitter.p.x = pixie.x;
            coinEmitter.p.x = pixie.x + 20;

            smokeEmitter.emit('once');
            coinEmitter.emit(.5);

            TweenLite.to(pixie, .5, {
                y: 490,
                onComplete: function () {
                    TweenLite.to(pixie, .2, { y: 530 });
                }
            });

            setTimeout(function () { jumpOver = false }, 1000);
            jumpOver = true;
        }

        function addBackground(loader, res) {
            background = PIXI.Sprite.fromImage('assets/iP4_BGtile.jpg');
            background2 = PIXI.Sprite.fromImage('assets/iP4_BGtile.jpg');

            foreground = PIXI.Sprite.fromImage('assets/iP4_ground.png');
            foreground2 = PIXI.Sprite.fromImage('assets/iP4_ground.png');
            foreground.y = foreground2.y = 640 - foreground2.height;

            app.stage.addChild(background, background2, foreground, foreground2);
        }

        function addPixie(loader, res) {
            pixie = new PIXI.spine.Spine(res.pixie.spineData);
            pixie.x = 1024 / 3 + 100;
            pixie.y = 530;
            pixie.scale.x = pixie.scale.y = .22;

            app.stage.addChild(pixie);

            pixie.stateData.setMix('running', 'jump', 0.2);
            pixie.stateData.setMix('jump', 'running', 0.4);
            pixie.state.setAnimation(0, 'running', true);
        }

        function addGlodAnim() {
            var frames = [];
            for (var i = 1; i <= 6; i++) {
                frames.push(PIXI.Texture.fromFrame('gold_' + i + '.png'));
            }

            glodFrame = frames;
        }

        function addProton() {
            proton = new Proton;
            renderer = new Proton.PixiRenderer(app.stage);

            var create = renderer.pool.create;
            renderer.pool.create = function (body, particle) {
                if (body.name == 'COIN') {
                    var glodAnim = new PIXI.extras.AnimatedSprite(glodFrame);
                    glodAnim.anchor.set(0.5);
                    glodAnim.animationSpeed = 0.4;
                    glodAnim.play();
                    return glodAnim;
                } else {
                    return create.call(proton.pool, body, particle);
                }
            }

            proton.addRenderer(renderer);
        }

        function addCoin() {
            coinEmitter = new Proton.Emitter();
            coinEmitter.rate = new Proton.Rate(new Proton.Span(2, 3), .1);

            coinEmitter.addInitialize(new Proton.Body({ name: 'COIN' }));
            coinEmitter.addInitialize(new Proton.Mass(1));
            coinEmitter.addInitialize(new Proton.Life(1.3));
            coinEmitter.addInitialize(new Proton.Velocity(new Proton.Span(3, 5), new Proton.Span(0, 60, true), 'polar'));

            coinEmitter.addBehaviour(new Proton.Rotate(Proton.getSpan(0, 360), new Proton.Span([-1, -2, 0, 1, 2]), 'add'));
            //coinEmitter.addBehaviour(new Proton.Alpha(1, 0));
            coinEmitter.addBehaviour(new Proton.Gravity(6));
            coinEmitter.addBehaviour(new Proton.Scale(Proton.getSpan(.2, .5)));

            coinEmitter.p.y = 250;
            proton.addEmitter(coinEmitter);
        }

        function addRain() {
            var emitter = new Proton.Emitter();
            emitter.rate = new Proton.Rate(new Proton.Span(15, 22), new Proton.Span(.1, .3));

            emitter.addInitialize(new Proton.Body('./image/rain.png'));
            emitter.addInitialize(new Proton.Mass(1));
            emitter.addInitialize(new Proton.Life(1, 2));

            var y = 60;
            var d = 800;
            emitter.addInitialize(new Proton.Position(new Proton.LineZone(130, y, app.stage.width + d, y)));
            emitter.addInitialize(new Proton.Velocity(new Proton.Span(6, 12), -130, 'polar'));

            emitter.addBehaviour(new Proton.Alpha(Proton.getSpan(1, 0)));
            emitter.addBehaviour(new Proton.Rotate(130));
            emitter.addBehaviour(new Proton.Scale(Proton.getSpan(.2, .6)));

            y = app.stage.height - 100;
            emitter.addBehaviour(new Proton.CrossZone(new Proton.LineZone(-1000, y, app.stage.width + 1000, y, 'down'), 'dead'));

            emitter.emit();
            proton.addEmitter(emitter);

            emitter.preEmit(1.2);
        }

        function addSmoke() {
            smokeEmitter = new Proton.Emitter();
            smokeEmitter.rate = new Proton.Rate(new Proton.Span(6, 8), 1);

            smokeEmitter.addInitialize(new Proton.Body('./image/smoke.png'));
            smokeEmitter.addInitialize(new Proton.Mass(1));
            smokeEmitter.addInitialize(new Proton.Life(1));
            smokeEmitter.addInitialize(new Proton.Velocity(new Proton.Span(.8, 1.2), new Proton.Span(0, 110, true), 'polar'));

            smokeEmitter.addBehaviour(new Proton.Rotate(0, new Proton.Span([-1, -2, 0, 1, 2]), 'add'));
            smokeEmitter.addBehaviour(new Proton.Scale(Proton.getSpan(.1, .3), .7));
            smokeEmitter.addBehaviour(new Proton.Alpha(1, 0));

            smokeEmitter.p.y = pixie.y;
            proton.addEmitter(smokeEmitter);
        }

        function tick() {
            bgRun();
            proton.update();
            proton.stats.update(2, container);
        }

        function bgRun() {
            postition += 10;

            background.x = -(postition * 0.6);
            background.x %= 1286 * 2;
            if (background.x < 0) {
                background.x += 1286 * 2;
            }
            background.x -= 1286;

            background2.x = -(postition * 0.6) + 1286;
            background2.x %= 1286 * 2;
            if (background2.x < 0) {
                background2.x += 1286 * 2;
            }
            background2.x -= 1286;

            foreground.x = -postition;
            foreground.x %= 1286 * 2;
            if (foreground.x < 0) {
                foreground.x += 1286 * 2;
            }
            foreground.x -= 1286;

            foreground2.x = -postition + 1286;
            foreground2.x %= 1286 * 2;
            if (foreground2.x < 0) {
                foreground2.x += 1286 * 2;
            }

            foreground2.x -= 1286;
        }
    </script>
</body>

</html>
